<template>
    <div class="ticket-list-background">
        <van-row type="flex" class="ticket-list-title">
            <van-col span="24">{{list.length>0?'以下是您的可开发票信息':'暂无可开发票信息'}}
               &#12288;<van-button size="small" type="primary" plain @click='showBindZFBSign=true' style='border-color: #4797fd;color: #000000;'>绑定支付宝</van-button>
            </van-col>
        </van-row>
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style='margin-bottom: 40px'>
            <van-checkbox-group v-model="orderNos">
                <van-row v-for="item in list" :key="item.orderNo" style='margin:10px 0px;width: 100%%;' >
                    <van-col span="2" style="background:#f7f6f6;">
                        <van-checkbox shape='square' style='margin-top: 28px' :key="item.orderNo" :name="item.orderNo"></van-checkbox>&#12288;
                    </van-col>
                <van-col span="22"   style='padding: 12px;background:#ffffff'>
              <!--   <van-row style='margin: 10px 5px;'>
                    <van-col span="14"><span style="color: #BDBDBD; font-size: 18px;">账单号:&#12288;</span>{{item.orderNo.substr(0, 6)}}</van-col>
                      <van-col span="10" style="color: #BDBDBD; "><span v-carplate-text='[item.plateNo,item.plateColor]'></span></van-col>
                </van-row> -->
                  <van-row style='margin: 10px 5px;'>
                    <van-col span="24"><span style="color: #BDBDBD; font-size: 16px;">账单号:&#12288;</span><span style="font-size: 12px">{{item.orderNo}}</span></van-col>
                </van-row>
                  <van-row style='margin: 10px 5px;'>
                <van-col span="24"><span style="color: #BDBDBD; font-size: 18px;">车牌号:&#12288;</span><span v-carplate-text='[item.plateNo,item.plateColor]'></span></van-col>                     
                </van-row>
                <van-row style='margin: 10px 5px;'>
                     <van-col span="24" style="color: #BDBDBD; "><span >支付时间:&#12288;</span>{{item.time|dateFormat('YYYY-MM-DD hh:mm:ss')}}</van-col>                   
                </van-row>
                <hr>
                 <van-row style='margin: 10px 5px;'>                                    
                    <van-col span="24" offset=0 style='text-align: right;'>支付金额：<span class='ticket-list-col-money'>{{item.fee| formatMoneyPenny('￥',"2")}}</span></van-col>
                </van-row>
                </van-col>
                </van-row>
            </van-checkbox-group>
        </van-list>
        <van-tabbar>
            <van-tabbar-item style='font-size: 18px'>
                <van-checkbox v-model='selectAll' shape='square' @click.native='checkedAll()'>全选</van-checkbox>
            </van-tabbar-item>
            <van-tabbar-item style='font-size: 18px'>合计 <span style="color:#FF8D00">{{bills| formatMoneyPenny('￥',"2")}}</span> </van-tabbar-item>
            <van-tabbar-item style="color:#ffffff;font-size: 18px;background:#4797fd " @click.native='drawBill()'>开发票</van-tabbar-item>
        </van-tabbar>



<van-dialog  v-model="showBindZFBSign"  show-cancel-button  :before-close="bindZFB">
 <span style="margin: 8px;display: inline-block;">
  <span style="margin-left: 3%;font-size: 19px;">说明:&#12288;</span>
   <span style="color:red;font-size: 14px;">请输入任意一笔支付宝（必须是您本人的账号）停车缴费的订单号绑定您的支付宝</span>
   </span>
  <van-field    v-model="orderNo"        label="订单号"    placeholder="请输入您的订单号"  />
  <span style="color:red;margin-left: 23%;font-size: 14px;">{{orderMsg}}</span>
</van-dialog>





    </div>
</template>
<script>
import { InvoiceService,GuidanceService } from './api';
import { Toast } from 'vant';
export default {
    name: 'ticketList',
    data() {
        return {            
            orderNos: [],
            selectAll: false,
            list: [],
            loading: false,
            finished: false,
            bills:0,
            jnOpenId:'',
            showBindZFBSign:false,
            orderNo:'',
            orderMsg:'',
            user:{}
        };
    },
    created() { 
        if(this.$route.query.userInfo){
            this.user=JSON.parse(this.$route.query.userInfo);
        }else{
            this.$router.push('ticketList');
        }       
      },
    methods: {
        getData(){
             InvoiceService.findCanInvoiceInfoByOpenid(this.jnOpenId).then((res) => {
// 支付方式:type:0：现金，1：微信电子支付扫码，2：刷卡，3：自主扣费，4：微信自主缴费，5：支付宝自主缴费，6：支付宝扫码，7：支付宝无感支付,8：零元放行
                        this.list = res;  
                        this.loading=false;
                        this.finished=true;                                
                     }, (err) => {
                        });
        },
        onLoad: function() {
            if(this.jnOpenId){
               this.getData();
            }else{
            GuidanceService.getPayOpenId(this.$route.query.code).then((res1) => {
                this.jnOpenId=res1; 
                this.getData();             
            }, (err) => {
                return;
            }); 
            }  
        },
        drawBill(){
            if(this.bills&&this.orderNos&&this.orderNos[0]){
                this.$router.push({name: 'ticketEdit', params: {accountNos: this.orderNos,bills: this.bills,zqOpenId:this.user.openid},query:{code:this.user.zqCode}});
            }            
        },
         checkedAll() {
            if (this.orderNos.length === this.list.length) {
                this.orderNos = [];
                this.selectAll = false;
            } else {
                this.orderNos = [];
                for (let i of this.list) {
                    this.orderNos.push(i['orderNo']);
                }
                this.selectAll = true;
            }
        },
        bindZFB(action, done) {           
                if (action === 'confirm') { 
                    if(this.orderNo){
                        this.orderMsg='';
                        let parm={
                        'jnOpenid': this.jnOpenId,
                        'openid':this.user.openid,
                        'outTradeNo':this.orderNo
                        }
                    InvoiceService.queryAliBuyerId(parm).then((res) => { 
                        Toast.success('绑定成功');                       
                        this.orderNo='';
                        this.orderMsg='';
                        done();
                        this.getData();
                     }, (err) => {  
                        Toast.fail(err.responseJSON.msg);
                        done(false);
                        });
                } else {                    
                    this.orderMsg='* 请输入您的支付宝订单号';
                    done(false);
                  }
                 
            }else{
               this.orderMsg='';
              done();  
            }
        }
    },
        watch:{
            orderNos(newVal,oldVal){
                this.bills=0;
                let strVehNo=newVal.join(",");                
                for(let i in this.list){
                    if(strVehNo.indexOf(this.list[i].orderNo)>-1){
                        this.bills+=this.list[i].fee;
                    }                 
                }
            }
        }
};
</script>
<style>
.ticket-list-background {
    position: relative;
    left: 0px;
    top: 0px;
    background: #f7f6f6;
    min-height: 100vh;
    padding: 20px;
}
.ticket-list-title {
    color: #3DA6FF;
    text-align: center;
}
.ticket-list-col-money {
    text-align: right;
    color: #FF8D00;
}
</style>
